<template>
    <el-row class = "min-h-screen bg-indigo-500">
        <el-col :lg="14" :md ="12" class = "flex items-center justify-center">
          <div >
            <div class="font-bold text-5xl text-light-50 mb-4">欢迎光临</div>
            <div class="text-gray-200 text-sm">此站点是《vue3+vite实战后
              台开发》`````````````````````的演示</div>
          </div>
        </el-col>
        <!--:lg="8"：表示在大屏幕（≥1200px）下，该列占据16列的宽度。-->
        <!--:md="12"：表示在中等屏幕（≥992px）下，该列占据12列的宽度。 -->
        <el-col :lg="10" :md ="12" class = "bg-light-50 flex items-center justify-center flex-col">
          <h2 class ="font-bold text-3xl text-gray-800">欢迎回来</h2>
          <div class="flex items-center justify-center my-5 text-gray-300 space-x-2">
            <span class="h-[1px] w-16 bg-gray-200"></span>
            <span>账号密码登录</span>
            <span class="h-[1px] w-16 bg-gray-20θ"></span>
          </div>

      <!-- 表单 model 绑定 form表单数据中的属性 -->
      <el-form 
      :model="form"
      ref="formRef"
      class="w-[250px]" 
      :rules = "rules"
      >
      <!-- 表单项 prop绑定表单数据中对应属性名的属性 -->
        <el-form-item prop = "username">
         <el-input v-model="form.username"placeholder="请输入用户名">
            <template #prefix>
            <el-icon><user/></el-icon>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item prop = "password">
         <el-input 
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          show-password><
            <template #prefix>
             <el-icon><lock/></el-icon>
            </template>
          </el-input>
      </el-form-item>
    <el-form-item>
      <el-button round color="#626aef" class="w-[250px]"
          type="primary"@click="onSubmit" :loading = "loading">登录</el-button>
    </el-form-item>
      </el-form>
        </el-col>
    </el-row>
  <!-- <div class="flex gap-4 mb-4">
    <span>UserName</span>
    <el-input
      v-model="username"
      style="width: 240px"
      placeholder="Type something"
      :prefix-icon="User"
    />
  </div> -->
  <!-- prefix-icon 是定义前缀图标的插槽-->

  </template>
  
<script lang="ts" setup>
import { ref,reactive,onMounted,onBeforeUnmount } from 'vue';
// 局部引入图标，全局图标引入只适用于 
// <template #prefix>
//     <el-icon><Lock /></el-icon>
//     </template>标签
import { Loading, User } from '@element-plus/icons-vue';
// 右上角小弹窗提示框,页面中间提示框
import {ElMessage } from 'element-plus';
import { toast } from "~/api/util/notice";
// 路由方法体
import { useRouter } from 'vue-router';
const router = useRouter();
// 引入对象存储工具
import { useStore } from 'vuex'
const store = useStore();
// 表单数据
const form =reactive({
username:"",
password:""
})

const rules = ({
  username: [
    {
      // required: 表示是否必填
      required: true, 
      message: '账号不能为空', 
      trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入有效密码', trigger: 'blur' },
    { min: 1, max: 16, message: '密码长度为1-16为', trigger: 'blur' },
  ],
});

const formRef = ref(null);

const onSubmit = ()=>{
  if(formRef.value != null){
    formRef.value.validate((valid: any) => {
    if (valid) {
      console.log('表单验证通过',valid);
      // 在这里执行登录逻辑
      handleLogin();
    } else {
      console.log('表单验证失败',valid);
      ElMessage.error('输入格式有误');
      return false;
    }
  });
  }else{
    console.log('表单验证失败');
  }
};

const loading = ref(false);
const handleLogin = () => {
  // 实现登录逻辑
  console.log('执行登录逻辑');
  // 例如：调用登录 API
  loading.value = true;
  // 调用store中action函数
  store.dispatch('login',form).then(res => {
    toast('登入成功!')
    // 登入成功后跳转到指定页面
    router.push('/');
  }).finally(() => {
    loading.value = false;
  });
};

//监听回车时间
function onkeyUp(e) {
  //keyCode == 13 是回车按键的编码
  if(e.keyCode == 13){
    onSubmit();
  }
}


//在页面存在时创建一个监听器
onMounted(()=>{
// 创建一个监听键盘回车事件
document.addEventListener('keydown', onkeyUp)
})

// 在页面销毁时移除监听器
onBeforeUnmount(()=>{
  document.removeEventListener('keydown', onkeyUp)
})
</script>



  